<template>
  <div :class="['form-checkbox', disabled ? 'disabled' : '']">
    <el-checkbox-group v-model="checkList" :disabled="disabled" size="mini" @change="handleCheckboxChange">
      <el-checkbox :label="item.value" v-for="item in dicData" :key="item.id">{{ item.label }}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    value: {},
    dicData: {
      type: Array,
      default: () => []
    },
    x: {
      type: Number,
      default: 0
    },
    y: {
      type: Number,
      default: 0
    },
    disabled: {
      type: Boolean,
      default: false
    },
    tdStyle: {}
  },
  data() {
    return {
      checkList: []
    };
  },
  methods: {
    handleCheckboxChange(value) {
      this.$emit('change', {
        value,
        x: this.x,
        y: this.y
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.form-checkbox {
  &.disabled {
    pointer-events: none;
  }
  .el-checkbox-group {
    .el-checkbox {
      margin-right: 10px;
    }
    .el-checkbox:last-child {
      margin-right: 10px;
    }
  }
}
</style>
